/* stylelint-disable */
//--- 栅格样式（Flex-Grid） ---//

@import "../themes/variable";

// 基础（basics）
.#{$cls}-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 1 * $screen-gutter;
  margin-left: 1 * $screen-gutter;
  margin-top: 1 * $screen-gutter;
}

// 无间距（no gutter）
.#{$cls}-noGutter {
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
}

.#{$cls}-noGutter > .#{$cls}-col,
.#{$cls}-noGutter > [class*="mg-col-"] {
  padding: 0;
}

.#{$cls}-col-noGutter {
  padding: 0;
}

//-- 方向（direction）
// 从左到右（row）
.#{$cls}-dir-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

// 从右到左（row-reverse）
.#{$cls}-dir-row-rev {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

// 从上到下（column）
.#{$cls}-dir-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

// 从下到上（column-reverse）
.#{$cls}-dir-col-rev {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

//-- 水平对齐
// 开头（start）
.#{$cls}-justify-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

// 结尾（end）
.#{$cls}-justify-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

// 中间（center）
.#{$cls}-justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

// 前后之间（between）
.#{$cls}-justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

// 间距（around）
.#{$cls}-justify-around {
  //-ms-flex-pack: distribute;
  justify-content: space-around;
}

// 相等（even）
.#{$cls}-justify-even {
  //-webkit-box-pack: space-evenly;
  //-ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

//-- 垂直对齐
// 开头（start）
.#{$cls}-align-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

// 结尾（end）
.#{$cls}-align-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

// 中间（center）
.#{$cls}-align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

// 基线（baseline）
.#{$cls}-align-baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

// 拉伸（stretch）
.#{$cls}-align-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

// 列（col）
.#{$cls}-col {
  -webkit-box-flex: 1;
  //-ms-flex-positive: 1;
  flex-grow: 1;
  //-ms-flex-preferred-size: 0;
  flex-basis: 0;
  padding: $screen-gutter;
}

// 固定列
.#{$cls}-col-fixed {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: $screen-gutter;
}

// 列级垂直对齐
// 开头（start）
.#{$cls}-col-align-start {
  //-ms-flex-item-align: start;
  align-self: flex-start;
}

// 结尾（end）
.#{$cls}-col-align-end {
  //-ms-flex-item-align: end;
  align-self: flex-end;
}

// 中间（center）
.#{$cls}-col-align-center {
  //-ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

// 基线（baseline）
.#{$cls}-col-align-baseline {
  //-ms-flex-item-align: baseline;
  align-self: baseline;
}

// 拉伸（stretch）
.#{$cls}-col-align-stretch {
  //-ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

//-- 多等分列
// 公共列
%col-base {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: $screen-gutter;
}

@for $i from 1 through $grid-columns {
  .#{$cls}-col-#{$i} {
    @extend %col-base;
    width: $grid-columns-scale * $i
  }
}

@for $i from $grid-columns through 0 {
  .#{$cls}-col-offset-#{$i} {
    margin-left: $grid-columns-scale * $i;
  }
}

@for $i from 1 through $grid-columns {
  @each $grid-name in map_keys($grid-list) {
    .#{$cls}-#{$grid-name}-#{$i} {
      @extend %col-base;
    }
  }
}

@each $grid-name, $grid-size in $grid-list {
  @media screen and (min-width: $grid-size) {

    %col-#{$grid-name} {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      padding: $screen-gutter;
    }

    @for $i from 1 through $grid-columns {
      .#{$cls}-#{$grid-name}-#{$i} {
        @extend %col-#{$grid-name};
        width: $grid-columns-scale * $i
      }
    }

    @for $i from $grid-columns through 0 {
      .#{$cls}-#{$grid-name}-offset-#{$i} {
        margin-left: $grid-columns-scale * $i;
      }
    }
  }
}
